import { Breadcrumb, Button } from 'antd';
import { useState, memo, useEffect } from 'react';
import { ItemType } from 'antd/es/breadcrumb/Breadcrumb';
import { DatasetsContext } from '../context';
import { useContextSelector } from 'use-context-selector';
import { TreeData } from '@/types/dataset';
import { RightOutlined } from '@ant-design/icons';
import { useDatasetsActions } from '@/store/datasetsStore';
import useWindowWidth from '@/hooks/event/use-window-width';
import { useDatasetStore } from '@/store/datasetStore';
import PagesHeader from '@/components/pages-header';
import { SvgIcon } from '@/components/icon';
import usePermission from '@/hooks/event/usePermission';
import '../styles/datasetlist.scss';

interface Crumbs extends ItemType {
  item: TreeData | undefined;
}

interface Props {
  disable: boolean;
  onCloseCicked?: () => void;
  onUpdateType?: (item: any) => void;
  onCloseSearch?: () => void;
  reNameFn: () => void;
}

const BreadCrumb = ({
  disable = false,
  onCloseCicked,
  onUpdateType,
  onCloseSearch,
  reNameFn,
}: Props) => {
  const { getParentId } = useDatasetStore();
  const { isPc } = useWindowWidth();
  const { isAdmin, isPermit } = usePermission();

  const [breadCrumbs, setBreadCrumbs] = useState<Crumbs[]>([
    {
      title: (
        // <Button
        //   type="text"
        //   style={{ fontSize: 16 }}
        //   onClick={() => {
        //     onClick(undefined);
        //     //清空掉parentIdStore
        //     getParentId('');
        //   }}
        // >
        //   知识库总览
        // </Button>
        <div
          style={{ fontSize: 16 }}
          onClick={() => {
            onClick(undefined);
            //清空掉parentIdStore
            getParentId('');
          }}
        >
          知识库
        </div>
      ),
      item: undefined,
      key: -1,
    },
  ]);
  const { selectedTreeData, setSelectedTreeData, selectedTreeNode, setSelectedTreeNode } =
    useContextSelector(DatasetsContext, (s) => s);
  const { setDataset } = useDatasetsActions();
  const onClick = (item: TreeData | undefined) => {
    getParentId(item?.id || item?._id);
    if (item) {
      const index = selectedTreeData.indexOf(item);
      const data = selectedTreeData.slice(0, index + 1);
      setSelectedTreeData(data);
      setSelectedTreeNode(item);
      onUpdateType && onUpdateType(item);
    } else {
      if (!isPc) {
        onCloseCicked && onCloseCicked();
      }
      setSelectedTreeData([]);
      setSelectedTreeNode(null);
    }
    //清空搜索框
    onCloseSearch && onCloseSearch();
  };

  useEffect(() => {
    console.log('selectedTreeNode===============', selectedTreeNode);

    // setDataset({
    //   expandKeys: selectedTreeData.map((item) => item.id) ?? [],
    // });

    const items = selectedTreeData?.map((item, index) => {
      return {
        title: (
          // <Button
          //   type="text"
          //   className={`${
          //     selectedTreeNode && selectedTreeNode?.id == item.id ? 'text-@brand-color' : '#000'
          //   }`}
          //   style={{
          //     // color: selectedTreeNode && selectedTreeNode?.id == item.id ? '#6D35FF' : '#000',
          //     fontSize: 16,
          //     color: selectedTreeNode && selectedTreeNode?.id == item.id ? '#1D2129' : '#86909C',
          //     fontWeight: selectedTreeNode && selectedTreeNode?.id == item.id ? 'bold' : '',
          //   }}
          //   onClick={() => {
          //     onClick(item);
          //   }}
          // >
          //   <div className="max-w-[100px] truncate text-left">{item.title?.toString()}</div>
          //   {isPermit && selectedTreeNode?.id == item.id && (
          //     <SvgIcon onClick={reNameFn} icon="ic_rj_pen" size="20" />
          //   )}
          // </Button>

          <div
            className={` flex cursor-pointer  items-center  rounded-default bg-[#FFF] text-[16px] font-semibold text-[#1D2129] ${
              selectedTreeNode && selectedTreeNode?.id == item.id ? 'text-@brand-color' : '#000'
            }`}
            style={{
              // color: selectedTreeNode && selectedTreeNode?.id == item.id ? '#6D35FF' : '#000',
              fontSize: 16,
              color: selectedTreeNode && selectedTreeNode?.id == item.id ? '#1D2129' : '#86909C',
              fontWeight: selectedTreeNode && selectedTreeNode?.id == item.id ? 'bold' : '',
            }}
            onClick={() => {
              onClick(item);
            }}
          >
            <div className=" max-w-[100px]  truncate text-left">{item.title?.toString()}</div>
            {isPermit && selectedTreeNode?.id == item.id && (
              <SvgIcon onClick={reNameFn} icon="ic_rj_pen" size="20" className="ml-1" />
            )}
          </div>
        ),
        item: item,
        key: index,
      };
    });

    items.unshift({
      title: (
        // <Button
        //   type="text"
        //   style={{
        //     fontSize: 16,
        //     color: selectedTreeNode ? "#86909C" : "#1D2129",
        //     fontWeight: selectedTreeNode ? "" : "bold"
        //   }}
        //   onClick={() => {
        //     onClick(undefined);
        //     //清空掉parentIdStore
        //     getParentId('');
        //   }}
        // >
        //   知识库
        // </Button>
        <div
          className=" flex  cursor-pointer  flex-col  rounded-default bg-[#FFF] text-[16px] font-semibold text-[#1D2129] "
          style={{
            fontSize: 16,
            color: selectedTreeNode ? 'var(--text-3)' : 'var(--text-5)',
            fontWeight: selectedTreeNode ? '' : 'bold',
          }}
          onClick={() => {
            onClick(undefined);
            //清空掉parentIdStore
            getParentId('');
          }}
        >
          知识库
        </div>
      ),
      item: undefined,
      key: -1,
    });

    setBreadCrumbs(items);
  }, [selectedTreeData, selectedTreeNode]);
  return (
    // <div
    //   className={`bread-crumb flex w-full items-center rounded-xl bg-[#F5F7FB] ${disable ? 'breadcrumb-disabled' : ''
    //     }`}
    // >
    <PagesHeader className={`bread-crumb ${disable ? 'breadcrumb-disabled' : ''}`}>
      <Breadcrumb
        items={breadCrumbs}
        className="bread-crumb"
        style={{
          fontSize: '16px',
          // marginLeft: '10px',
          // marginTop: '5px',
          marginBottom: '5px',
          display: 'flex',
          alignItems: 'center',
        }}
        separator={<SvgIcon icon="dataset-xg" size="16" />}
        // separator="/"
      />
    </PagesHeader>
    // </div>
  );
};

export default memo(BreadCrumb);
